<template>
  <div class="findmusic">
    <div>
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">  <router-link :to="{name:'index'}">个性推荐</router-link></el-menu-item>
        <el-menu-item index="2"><router-link :to="{name:'exclusive'}">专属定制</router-link></el-menu-item>
        <el-menu-item index="3"><router-link :to="{name:'playlist'}">歌单</router-link></el-menu-item>
        <el-menu-item index="4"><router-link :to="{name:'ranking'}">排行榜</router-link></el-menu-item>
        <el-menu-item index="5"><router-link :to="{name:'singer'}">歌手</router-link></el-menu-item>
        <el-menu-item index="6"><router-link :to="{name:'upmusic'}">最新音乐</router-link></el-menu-item>
      </el-menu>
    </div>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "findmusic",
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss">
.findmusic {
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>
